<template>
  <view class="quick-nav">
    <view class="nav-item" @click.stop="$emit('customHandle', 0)">
      <view class="image-wrap">
        <image src="https://image.qqpyyds.com/mpAppImg/icon/stream_audit_icon.png" class="image-icon" />
        <!-- 角标 -->
        <u-badge
            v-if="headData.distributionUnreadCount>0"
            :is-dot="false"
            type="error"
            :count="headData.distributionUnreadCount"
            :offset="[-12, -12]"
        ></u-badge>
      </view>
      <view class="txt">帮卖审核</view>
    </view>
    <view class="nav-item" @click.stop="$emit('customHandle', 1)">
      <view class="image-wrap">
        <image src="https://image.qqpyyds.com/mpAppImg/icon/stream_instr_icon.png" class="image-icon" />
      </view>
      <view class="txt">帮卖介绍</view>
    </view>
    <view class="nav-item" @click.stop="$emit('customHandle', 2)">
      <view class="image-wrap">
        <image src="https://image.qqpyyds.com/mpAppImg/icon/stream_bonus_icon.png" class="image-icon" />
      </view>
      <view class="txt">推荐奖金</view>
    </view>
    <view class="nav-item" @click.stop="$emit('customHandle', 3)">
      <view class="image-wrap">
        <image src="https://image.qqpyyds.com/mpAppImg/icon/stream_commssion_icon.png" class="image-icon" />
      </view>
      <view class="txt">专属佣金</view>
    </view>
    <view class="nav-item" @click.stop="$emit('customHandle', 4)">
      <view class="image-wrap">
        <image src="https://image.qqpyyds.com/mpAppImg/icon/helpsell_setting_icon.png" class="image-icon" />
      </view>
      <view class="txt">帮卖设置</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'quickNav',
  data() {
    return {
      domHeight: 78
    }
  },
  computed: {
    headData () {
      return this.$store.state.myPageInfo
    }
  },
  async mounted() {
    const { height } = await this.getUNavbarHeight('.quick-nav')
    this.domHeight = height || 78
  }
}
</script>

<style lang="scss" scoped>
.quick-nav {
  display: flex;
  width: 100%;
  height: 156rpx;
  padding: 16rpx 32rpx;
  background-color: #FFFFFF;
  .nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 20%;
    height: 124rpx;
  }
  .image-wrap {
    position: relative;
    width: 64rpx;
    height: 64rpx;
  }
  .image-icon {
    width: 100%;
    height: 100%;
  }
  //.badge {
  //  position: absolute;
  //  top: -12rpx;
  //  right: -12rpx;
  //  z-index: 4;
  //  padding: 0 10rpx;
  //  border-radius: 50%;
  //  line-height: 32rpx;
  //  font-size: 24rpx;
  //  text-align: center;
  //  background-color: $themeColor;
  //  color: #FFFFFF;
  //}
  .txt {
    margin-top: 12rpx;
    font-size: 24rpx;
    line-height: 32rpx;
    color: $n8Color;
  }
}
</style>